<template>
  <div class="mySelectBox">
    <el-select
      :ref="selectRef"
      @change="selectChange(childModel)"
      :clearable="configDefault.clearable"
      :collapse-tags="configDefault.collapseTags"
      :disabled="disabled"
      :filterable="configDefault.filterable"
      :loading="configDefault.loading"
      :multiple="configDefault.multiple"
      :no-data-text="configDefault.noDataText"
      :remote="configDefault.remote"
      :popper-append-to-body="configDefault.popperAppendToBody"
      @remote-method="remoteMethod"
      :value-key="configDefault.props.id"
      @focus="focus(childModel, modelKey)"
      @visible-change="visibleChange(childModel, modelKey, $event)"
      class="el-form-item-all-input"
      :placeholder="disabled ? '' : configDefault.placeholderLabel"
      v-model.lazy="childModel"
    >
      <el-option
        :disabled="item.disabled"
        :key="index"
        :label="item[configDefault.props.label]"
        :value="item[configDefault.props.id]"
        v-for="(item, index) in configDefault.options"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { getComboData } from "@/components/api/fromSource.js";
import XEUtils from "xe-utils";
export default {
  name: "mySelect",
  props: {
    //自定义
    selectRef: {
      type: String,
      default() {
        return "vueSelect";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组下拉框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: "",
      //configDefault  继承表中的config字段
      configDefault: {
        isCustomData: true,
        options: [], // 下拉选项,
        multiple: false, // 是否多选,
        // 是否可以清空选项
        clearable: true,
        // 是否可搜索
        filterable: true,
        // 选项为空时显示的文字
        noDataText: "无数据",
        // 多选时是否将选中值按文字的形式展示
        collapseTags: false,
        // 是否正在从远程获取数据
        loading: false,
        remote: false, // 是否为远程搜索
        props: {
          // 当前下拉选项配置 {label:'显示文本值',id:'当前选项绑定值'}
          label: "label",
          id: "id", // 作为 id 唯一标识的键名，绑定值为对象类型时必填
        },
        filter: "", //过滤条件 filter:"mof_div_code like '12%'"
        popperAppendToBody: false,
        placeholderLabel: "",
      },
    };
  },
  watch: {
    childModel(val, oldVal) {
      if (
        (this.configDefault.multiple && !XEUtils.isEqual(val, oldVal)) ||
        (!this.configDefault.multiple && val !== oldVal)
      ) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (
        ((this.configDefault.multiple &&
          !XEUtils.isEqual(val, this.childModel)) ||
          (!this.configDefault.multiple && val !== this.childModel)) &&
        val
      ) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  created() {
    // //多选时可能存在多个键值
    if (this.configDefault.multiple) {
      this.childModel = this.model && this.model.length > 0 ? this.model : [];
    } else {
      this.childModel = this.model || this.model == 0 ? this.model : "";
    }
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      if (!this.configDefault.isCustomData) {
        let params = {
          // elementCode: this.fromSource || this.modelKey,
          // filter: this.configDefault.filter
        };
        getComboData(params).then((res) => {
          this.initSelectData(res.data);
        });
      }
    },
    // 当input获得焦点时触发
    focus(childModel, modelKey) {},
    initSelectData(data) {
      this.configDefault.options = data && data.length > 0 ? data : [];
    },
    // 下拉框出现/隐藏时触发
    visibleChange(childModel, modelKey, $event) {},
    // 选中值发生变化时触发
    selectChange: function (newVal) {
      let currentObj = [];
      let idVal = this.configDefault.props.id;
      XEUtils.arrayEach(this.configDefault.options, (val) => {
        if (this.configDefault.multiple) {
          if (newVal && newVal.includes(val[idVal])) {
            currentObj.push(val);
          }
        } else {
          if (val[idVal] == newVal) {
            currentObj = val;
            return;
          }
        }
      });
      this.$emit(
        "changeCallback",
        this.modelKey + "_" + this.which,
        newVal,
        currentObj
      );
    },
    remoteMethod() {
      //远程搜索方法
      this.$emit("remoteMethodCallback", this.modelKey + "_" + this.which);
    },
  },
};
</script>

<style lang="less" scoped>
.mySelectBox .el-select {
  display: block;
}
</style>
